<template>
    <div class="app-container">
        <el-drawer
        :modal-append-to-body="false"
        :append-to-body="true"
        size="90%"
        class="box-drawer"
        :with-header="false"
        :visible.sync="drawerLoading"
        >
         <!-- 头部-->
      <div style="position: relative">
        <div class="drawerTitle">
          <span>发放考核达标奖励</span>
          <div class="close" @click="cloneDrawer">
            <i class="el-icon-close" style="font-size: 24px;" />
          </div>
        </div>
      </div>
        <div style="background-color: #fff">
        <div class="container-module" style="padding-bottom: 0">
          <el-form :inline="true" class="search-form" size="small" ref="searchForm" :model="searchForm">
            <el-row style="display: flex">
              <div style="flex: 1">
                <el-form-item class="search-form-item" label="用户 ID">
                  <el-input style="width: 100%" v-model="searchForm.params.user_id" placeholder="请输入运营id">
                  </el-input>
                </el-form-item>
                <el-form-item class="search-form-item" label="用户名称">
                  <el-input style="width: 100%" v-model="searchForm.params.nickname" placeholder="请输入用户名称"> </el-input>
                </el-form-item>            
                <el-form-item class="search-form-item" label="手机号">
                  <el-input style="width: 100%" v-model="searchForm.params.mobile" placeholder="请输入手机号"> </el-input>
                </el-form-item>
              </div>
              <div style="padding: 5px 0">
                <el-form-item>
                  <el-button size="small" type="primary" icon="el-icon-search" @click="getList">查询</el-button>
                  <el-button size="small" type="primary" icon="el-icon-refresh" @click="resetting">重置</el-button>
                  <el-button v-if="!searchDisplay" size="small" icon="el-icon-caret-bottom"
                    @click="searchDisplay = true">展开</el-button>
                  <el-button v-else size="small" icon="el-icon-caret-top" @click="searchDisplay = false">收起</el-button>
                </el-form-item>
              </div>
            </el-row>
            <el-form-item v-if="searchDisplay" class="search-form-item" label="所在分组">
              <el-select  placeholder="请选择" v-model="searchForm.params.market_group_id" style="width: 100%" filterable reserve-keyword>
                <el-option v-for="item in clustersList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          
            <el-form-item v-if="searchDisplay" class="search-form-item" label="入团时间">
              <el-date-picker @change="domeTimeWay" style="width: 100%" value-format="yyyy-MM-dd" v-model="establishTime"
                type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <el-divider></el-divider>
        <div style="padding: 0 20px">
          <div class="marginBottom">
            <el-row :gutter="20">
              <el-col :span="12">
                <span>经理列表（满足奖励条件的）</span>
              </el-col>
              <el-col style="text-align: right;" :span="12">
                <el-button @click="reachlists()" type="info">考核达标记录</el-button>
              </el-col>
            </el-row>
          </div>
          <el-row :gutter="20">
            <el-col class="new_table_card">
                <el-form ref="allocationform" :model="formData" :rules="formRules" inline >
              <el-table highlight-current-row border :data="formData.managerList" max-height="650" :header-cell-style="{
                  'background-color': '#f3f8fe',
                  color: '#606266',
                  height: '50px',
                }" style="width: 100%;" v-loading="loading">
                <el-table-column align="center"  prop="id" label="运营id"/>
                <el-table-column align="center"  prop="id" label="用户名称"/>
                <el-table-column align="center"  prop="id" label="岗位级别"/>
                <el-table-column align="center"  prop="id" label="团队成交订单数"/>
                <el-table-column align="center"  prop="id" label="团队退单数"/>
                <el-table-column align="center"  prop="id" label="团队销售额"/>
                <el-table-column align="center"  prop="id" label="团队实际成交额"/>

                    <el-table-column  label="现金奖励" align="center" width="140">
                        <template slot-scope="scope" >
                            <el-col style="margin-top:10px">
                                <el-form-item :prop="`managerList.${scope.$index}.award_balance`" :rules="formRules.moneynumber">
                                    <el-input-number :min="0" :max="100000"  style="width:100px" size="mini" controls-position="right"  v-model="scope.row.award_balance" ></el-input-number>
                                </el-form-item>
                            </el-col>
                        </template>
                    </el-table-column>

                    <el-table-column  label="奖励积分" align="center" width="140" >
                        <template slot-scope="scope">
                            <el-col style="margin-top:10px">
                                <el-form-item :prop="`managerList.${scope.$index}.award_integral`" :rules="formRules.moneynumber">
                                    <el-input-number :min="0" :max="100000" style="width:100px" size="mini" controls-position="right" v-model="scope.row.award_integral" ></el-input-number>
                                </el-form-item>
                            </el-col>
                        </template>
                    </el-table-column>

                    <el-table-column  label="奖励提货券" align="center" width="140" >
                        <template slot-scope="scope">
                            <el-col style="margin-top:10px">
                                <el-form-item :prop="`managerList.${scope.$index}.award_voucher`" :rules="formRules.moneynumber">
                                    <el-input-number  :min="0" :max="100000" style="width:100px" size="mini" controls-position="right" v-model="scope.row.award_voucher" ></el-input-number>
                                </el-form-item>
                            </el-col>
                        </template>
                    </el-table-column>

                    <el-table-column  label="奖励转化卡"  align="center" width="210" >
                        <template slot-scope="scope">
                            <el-col style="margin-top:10px">
                                <!-- :rules="getValidationRules(scope.row.award_point_card_type)" -->
                                <el-form-item :prop="`managerList.${scope.$index}.award_point_card_num`" >
                                    <el-input style="width:170px" :min="0" :max="100000"  size="mini" controls-position="right" v-model="scope.row.award_point_card_num" >
                                        <el-select style="width:100px" v-model="scope.row.award_point_card_type" slot="append" placeholder="请选择">
                                            <el-option label="数字" :value="1"></el-option>
                                            <el-option label="百分比%" :value="2"></el-option>
                                        </el-select>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </template>
                    </el-table-column>

                    <el-table-column  label="转换卡有效期"  align="center" width="140" >
                        <template slot-scope="scope">
                            <el-col style="margin-top:10px">
                                <el-form-item >
                                    <el-input-number :min="0" :max="10000" style="width:100px" size="mini" controls-position="right" v-model="scope.row.award_point_card_expire" ></el-input-number>
                                </el-form-item>
                            </el-col>
                        </template>
                    </el-table-column>

                <el-table-column align="center"  prop="address" label="操作">
                  <template slot-scope="scope">
                    <el-button  type="text"  size="small"  @click="group_adjustment(scope.row)"> 发放 </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
            </el-col>
          </el-row>
          <el-row style="text-align: right;margin-top: 60px;">
            <pagination v-show="total > 0" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.count"
              @pagination="getList" />
          </el-row>
        </div>
      </div>
      


        </el-drawer>
          <!-- 调组 -->
          <el-dialog
        title="调配分组"
        :visible.sync="dialogClass"
        width="600px"
        :before-close="CloseDialogLabel"
      >
        <el-row :gutter="20">
          <el-form
            :model="ruleFormClass"
            :rules="rulesgrounp"
            ref="rulesgrounp"
            status-icon
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-col :span="22">
              <el-form-item label="当前分组">
                {{ groupingname }}
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="调整到分组" prop="market_group_id">
                <el-select
                  clearable
                  v-model="ruleFormClass.market_group_id"
                  placeholder="请选择分组"
                >
                  <el-option
                    v-for="item in groupings"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="CloseDialogLabel">取 消</el-button>
          <el-button
            type="primary"
            :loading="butloading"
            @click="submitFormClass()"
            >确 定</el-button
          >
        </span>
      </el-dialog>


      <reachlist ref="refreachlist" />
     
    </div>
  </template>
  
  <script>
    import {
      managerindex,
      grounplist,
      managermove,
      roleDelete
    } from "@/api/manager/index";
    import reachlist from "./reachlist.vue"
 
    export default {
      watch: {
        checkboxTableThead(valArr) {
          this.tableThead = this.allTableThead.filter(
            (i) => valArr.indexOf(i) >= 0
          );
          this.tableKey = this.tableKey + 1;
          this.$nextTick(() => {
            this.$refs.tablerefs.doLayout();
          });
        },
       
      },
      components: {
        reachlist
      },
      data() {
        return {
             //表单校验
             formRules:{
                    moneynumber: [{
                        required: false,
                        validator: (rule, value, callback) => {
                        let req = /^\d+(\.\d{1,2})?$/;
                        if (req.test(value)) {
                            if (Number(value) > 99999999) {
                            return callback(new Error("金额不能大于99999999"));
                            }
                            callback();
                        } else {
                            callback(new Error("保留两位小数"));
                        }
                        },
                        trigger: "change",
                    }, ],
                    newFieldName: [{
                        required: false,
                        validator: (rule, value, callback) => {
                        let req = /^\d+$/;
                        if (req.test(value)) {
                            callback();
                        } else {
                            callback(new Error("请输入正整数"));
                        }
                        },
                        trigger: "change",
                    }],
                },
          rulesgrounp: {
          market_group_id: [
            {
              required: true,
              validator: (rule, value, callback) => {
                if (!value) {
                  return callback(new Error("请选择分组"));
                }
                callback();
              },
              trigger: "change",
            },
          ],
        },
        clustersList: [], //分组
        market_manager_id: "", //运营经理ID
          ruleFormClass: {//调整分组
            market_group_id: "",
            user_id: "", //列表的成员ID
          }, 
          searchgrounpForm: {
            page: 1,
            count: 30,
            params: {
              market_manager_id: "",
            },
          },
          formData:{
            managerList:[]
          },
          drawerLoading: false, //弹框
          groupings: [], //分组
          groupingname: "", //当前分组
          butloading:false,
          dialogClass: false, 
          loading: false, //加载
          establishTime: [],//入团时间段
          reduce: 0,
          // 默认表头
          tableKey: 1, // 为了保证table 每次都会重渲
          searchDisplay: false,
          searchForm: {
            page: 1,
            count: 10,
            params: {
              market_group_id: '',
              market_manager_id:'',
              user_id:'',
              nickname:'',
              mobile:'',
              create_time_start: '',
              create_time_end: '',
            },
          },
          total: 0,
        };
      },
      created() {
        // this.getList(); //运营成员
        // this.getclusters(); //获取所有分组
      },
      methods: {
        //记录
        reachlists(){
          this.$refs.refreachlist.open('111','（优秀奖励记录）');
        },
        // 父组件传值
        open(id) {
            console.log('1111')

        // this.operationsid = id
        this.drawerLoading = true

        managerindex(this.searchForm).then((res) => {
            this.formData.managerList = res.data.list;
            this.total = res.data.total
            this.loading = false
          });



        // this.loading = true
        // this.searchgrounpForm.params.market_manager_id = id
        // this.groupinglist()
        // userListNotJoin(this.searchForm).then((res) => {
        //   this.loading = false
        //   this.inventorylist = res.data.list
        //   this.total = res.data.total
        // })
      },



        // 关闭调组弹框
        CloseDialogLabel() {
          this.ruleFormClass = {
            user_id: "",
            market_group_id: "",
          };
          this.dialogClass = false;
          this.$refs.rulesgrounp.clearValidate();
        },
       
  
        //点击调组
        group_adjustment(row) {
        
          this.dialogClass = true;
          this.groupinglist();
        },
        //获取分组列表
      groupinglist() {
       
      },
      //关闭详情抽屉
      cloneDrawer() {
        this.drawerLoading = false
        setTimeout(() => {
            this.$parent.resetting();
        }, 500);
      },
      //获取所有分组
      getclusters() {
        let obj = {
          page:1,
          count:30,
          params:{}
        }
        grounplist(obj).then((res) => {
          this.clustersList = res.data.list;
        });
      },
          //保存分组
        submitFormClass() {
        let _this = this;
        _this.$refs.rulesgrounp.validate((valid) => {
          if (valid) {
            _this.butloading = true;
            managermove(_this.ruleFormClass).then((res) => {
              if (res.code !== 200) {
                _this.$messages.error(res.msg);
                _this.butloading = false;
                return;
              }
              _this.$messages.success("操作成功");
              _this.dialogClass = false;
              _this.butloading = false;
              this.ruleFormClass.user_id = "";
              this.ruleFormClass.market_group_id = "";
              this.getList();
            });
          } else {
            return false;
          }
        });
      },
    
        //解绑
      unbind(row) {
        this.$confirm(
          "您确定要解绑该成员吗? 解绑后，该成员自动脱离与当前团队的所有关系",
          "解绑操作",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            roleDelete({ user_id: row.user_id }).then((res) => {
              this.$messages.success("解绑成功");
              this.getList();
            });
          })
          .catch(() => {});
      },
        // 获取列表
        getList() {
          this.loading = true
          managerindex(this.searchForm).then((res) => {
            console.log(res)
            if (res.code !== 200 || res.status !== 1) {
              this.$messages.error(res.msg);
              this.loading = false
              return;
            }
            this.formData.managerList = res.data.list;
            this.total = res.data.total
            this.loading = false
          });
  
        },
        //重置
        resetting() {
          this.searchForm = {
            page: 1,
            count: 10,
            params: {
              market_group_id: '',
              market_manager_id:'',
              user_id:'',
              nickname:'',
              mobile:'',
              create_time_start: '',
              create_time_end: '',
            },
          }
          this.establishTime = []
          this.getList()
        },
        //入团时间
        domeTimeWay(val) {
          if (val.length !== 0) {
            this.searchForm.params.create_time_start = val[0];
            this.searchForm.params.create_time_end = val[1];
          } else {
            this.searchForm.params.create_time_start = "";
            this.searchForm.params.create_time_end = "";
          }
        },
      },
    };
  </script>
  
  <style lang="scss">
  .new_table_card{
    height:600px
  }
  .el-table--scrollable-y {
  .el-table__header-wrapper {
    .el-table__header {
      thead {
        tr {
          &::after {
            content: '';
            width: 15px;
            height: auto;
            display: table-cell;
            background: #f2f2f7;
          }
        }
      }
    }
  }
}
   /* 设置滚动条的宽度和颜色 */
   .el-table__body-wrapper {
      scrollbar-width: 15px; /* Firefox */
      scrollbar-color: #bbbbbb #eee; /* Firefox */
  }

  /* 滚动条的整体样式 */
  .el-table__body-wrapper::-webkit-scrollbar {
      width: 12px;
  }

  /* 滚动条轨道的样式 */
  .el-table__body-wrapper::-webkit-scrollbar-track {
      background-color: #eee;
  }

  /* 滚动条滑块的样式 */
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
      background-color: #bbbbbb;
      border: 3px solid #fff;
      border-radius: 10px;
  }

  /* 兼容 IE 浏览器 */
  .el-table__body-wrapper {
      scrollbar-base-color: #eee;
      scrollbar-arrow-color: #bbb;
      scrollbar-3dlight-color: #bbb;
      scrollbar-darkshadow-color: #bbb;
      scrollbar-face-color: #bbb;
      scrollbar-highlight-color: #bbb;
      scrollbar-shadow-color: #bbb;
  }

  </style>
  